<template>
  <div class="dark:tw-text-white">
    <h6 class="q-mb-md q-mt-sm" style="font-weight: bold">{{ name }}
      <br />
      <div style="font-weight: normal;font-size: 15px">
        <q-icon :name="outlinedCalendarMonth" />
        {{ date }}
      </div>
    </h6>

    <div class="tw-grid tw-grid-cols-2 tw-gap-10 md:tw-grid-cols-4 md:tw-gap-5   ">
      <div>
        <span class="slot">地址</span>
        <p>{{ address }}</p>
      </div>
      <div>
        <span class="slot">就读院系</span>
        <p>{{ dept }}</p>
      </div>
      <div>
        <span class="slot">专业</span>
        <p>{{ major }}</p>
      </div>
      <div>
        <span class="slot">学历</span>
        <p>{{ degree }}</p>
      </div>
    <div>
      <span class="slot">学习成绩排名</span>
      <p>{{ rank }}</p>
    </div>
    <div>
      <span class="slot">GPA</span>
      <p>{{ gpa }}</p>
    </div>
    </div>
  </div>


</template>

<script>
import { outlinedCalendarMonth } from "@quasar/extras/material-icons-outlined";

export default {
  name: "EduCard",
  props: {
    name: String,
    address: String,
    dept: String,
    major: String,
    degree: String,
    rank: String,
    gpa: String,
    date: String
  },
  setup() {
    return {
      outlinedCalendarMonth
    };
  }
};
</script>

<style scoped>
.slot {
  color: #666666;
}

</style>
